
//Load page
$(window).on('load', function () {
    if(document.readyState=='complete'){ 
 		$(".start").html("START");
 		$('.start').click(function(){
			start();
		});
 		panduan();
	}
});

// 启动MV
function start(){
	openstart();
	// photoshow();
	// photoeffct_8(10);
	// end();
}

// op顺序播放
function openstart(){
	//1.弹出标题
	$(".start").addClass("start-effect");
	setTimeout(function(){
		playm();  //1.1打开音乐
		tanchu();  //1.2弹出标题
	},1000*(20/25)); //---开始时间

	setTimeout(function(){
		searchloc(); // 1.3弹出搜索框
	}, 3300); //---搜索弹出时间

	setTimeout(function(){
		page2(); // 1.4收起page1打开page2
	}, 7000);

	setTimeout(function(){
		page3(); // 1.5收起时间轴
	}, 9000);

	setTimeout(function(){
		photoshow(); // 2.0照片轮播
	}, 9300);
}
// 1.1打开音乐
function playm(){
	$("#audio").trigger('play');
}
// 1.2弹出标题
function tanchu(){
	$(".page-1").removeClass("page-1-effect");
	$(".tmap").addClass("tmap-effect");
	$(".titbod").addClass("titbod-effect");
	setTimeout(function(){
		$(".tmap").addClass("tmap-effect-out");
	},2400); //---标题时间
}
// 1.3弹出搜索框
function searchloc(){
	$(".search").css("visibility","visible");
	$(".search").addClass("search-in");
	$(".fanpai").removeClass("fanpai-in");
	$(".fanpai h1").addClass("fanpai-rota");
	$(".fanpai p").addClass("fanpai-rota");
	setTimeout(function(){
		$(".search").removeClass("search-in");
		$(".search").addClass("search-loc");
		$(".hand").addClass("hand-loc");
		$(".search input").addClass("search-input");
	}, 1500)
}
// 1.4收起page1打开page2
function page2(){
	$(".content").hide();
	$(".page-1").css("top","-100%");
	$(".mask").hide('slow/500/fast', function() {
		$(".page-2").css("visibility","visible");
		$(".page-2").removeClass('page-2-effect')
		$(".poinline").addClass("poinline-hight");
		$(".past").addClass("past-hi");
		$(".page-1").hide();
	});
}
// 1.5打开照片播放器
function page3(){
	$(".page-2").css({"left":"-100%"});
	setTimeout(function(){
		$(".page-2").hide();
	}, 300);
}

// 2.0照片轮播 定时器，自动播放
function photoshow(){
	$(".page-3").css("visibility","visible");
	var time = 0;
	$(".photobox").children().each(function(){
		var id = $(this).attr("id");
		var stopset = setTimeout(function(){
			if(id=="photo1"){photoeffct_1(1);}
			if(id=="photo2"){photoeffct_2(2);}
			if(id=="photo3"){photoeffct_1(3);}
			if(id=="photo4"){photoeffct_2(4);}
			if(id=="photo5"){photoeffct_3(5);}
			if(id=="photo6"){photoeffct_4(6);}
			if(id=="photo7"){photoeffct_5(7);}
			if(id=="photo8"){photoeffct_6(8);}
			if(id=="photo9"){photoeffct_7(9);}
			if(id=="photo10"){photoeffct_8(10); end();}
		},time);
		time = time + 4000;
	});

}

// 照片动画
// 带时间线 -右上弹入
function photoeffct_1(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-1");
	// $(photoec).css({"animation-play-state":"running","-webkit-animation-play-state":"running"});
	$(photoec).parent().append("<i class='btline bthit'></i>");
	$(".btline").css("left","-20px");
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-1-out");
	}, 2200);
}
// 带时间线 -左上弹入
function photoeffct_2(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-2");
	$(photoec).parent().append("<i class='btline bthit'></i><i class='btline2 btline'></i>");
	$(".bthit").css({"right":"26px","bottom":"30%"});
	$(".btline2").css({"right":"26px"});
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-2-out");
	}, 2200);
}
// 上向下弹入
function photoeffct_3(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-3");
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-3-out");
	}, 2600);
}
// 左向右弹入
function photoeffct_4(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-4");
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-4-out");
	}, 2600);
}
// 带上一张模糊背景 右侧进入 不要作为第一张动画
function photoeffct_5(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-5");
	$(photoec).parent().prev().attr("class","photobox").addClass("backac");
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-5-out");
	}, 200);
}
// 带上一张模糊背景 左侧进入 不要作为第一张动画
function photoeffct_6(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-6");
	$(photoec).parent().prev().attr("class","photobox").addClass("backac-r");
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-6-out");
	}, 200);
}
// 带上两张模糊背景 向右上滑动 不要作为第一和第二张动画
function photoeffct_7(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-7");
	$(photoec).parent().prev().attr("class","photobox").addClass("backac-tr");
	$(photoec).parent().prev().prev().attr("class","photobox").addClass("backac-tr2");
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-7-out");
	}, 400);
}
// 带一张模糊背景 右向左弹入 不要作为第一张动画
function photoeffct_8(index){
	var photoec = "#photo" + index;
	$(photoec).addClass("photo-effect-8");
	$(photoec).parent().prev().attr("class","photobox").addClass("backac-loc");
	setTimeout(function(){
		$(photoec).parent().addClass("photo-effect-8-out");
	}, 600);
}


// 结束
function end(){
	setTimeout(function(){
 		wall();
 		setTimeout(function(){
 			mvend();
 		}, 2600);
	},4000)
}
// 显示照片墙
function wall(){
	$(".page-4").addClass('page-4-effect');
	$(".card li:eq(4)").addClass("rotcard");
}
// 结束页面
function mvend(){
	$(".page-4").removeClass('page-4-effect');
	$(".page-4").addClass('page-4-effect-out');
	setTimeout(function(){
		$(".mvend").addClass("mvendpak");
		// $("#audio").trigger('pause'); //关闭音乐
	}, 600);
}

//判断显示图片的大小自适应屏幕宽高
function panduan(){
	// 如果有用户头像的话
	if($(".headmov").html()!=""){
		var boxh = $(".photo-box").height();
		$(".photo-box").css({"height":(boxh-93)+"px"});
	}
	// 判断动画图片大小自适应
    $(".photo-box img").each(function (index) {
        var imgW = $(".photo-box img").width();
        var winW = $(".photo").width();
        if(imgW > winW){
            $(".photo-box img").css({'width':"100%",'height':'auto'});
            $(".photo-box img").each(function(){  
		        var imgH = $(".photo-box img").height();
		        var winH = $(".photo").height();  	
		        if (imgH > winH) {
		            $(".photo-box img").css({'height':'100%','width':'auto'});
		        }
        	})
        }
    })
    // 判断照片墙图片大小
  $(".card li img").each(function(){
  	var img = new Image();
  	var tvb = $(this);
  	img.src = tvb.attr("src");
  	img.onload = function(){
		var w = this.width;
		var h = this.height;
		(w>h)?tvb.css({"width":"auto","height":"100%"}):tvb.css({"height":"auto","width":"100%"});
  	}
  })
}
